import {LitElement, html, css} from 'lit';
import { customElement } from 'lit/decorators.js';
import {Router} from "@vaadin/router";
import {routes} from "@route/routes.ts";

// 使用 @customElement 装饰器定义组件名称
@customElement('router-host')
export class RouterHost extends LitElement {
  static styles = css`
    .outlet {
        width: 100%;
        height: 100%;
    }
  `;

  firstUpdated() {
    // @ts-ignore
    super.firstUpdated();
    const router = new Router(this.shadowRoot.querySelector('#outlet'));
    router.setRoutes(routes);
  }

  // 定义组件的渲染逻辑
  render() {
    return html`
      <div id="outlet"></div>
    `;
  }
}

// 确保组件在浏览器中注册
declare global {
  interface HTMLElementTagNameMap {
    'router-host': RouterHost;
  }
}